<template>
  <div class="filters">
    <button @click="filter = 'all'" :class="{ active: filter === 'all' }">全部</button>
    <button @click="filter = 'active'" :class="{ active: filter === 'active' }">未完成</button>
    <button @click="filter = 'completed'" :class="{ active: filter === 'completed' }">已完成</button>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, watch } from 'vue'

const filter = ref('all')
const emits = defineEmits(['filter-change'])

watch(filter, (newFilter) => {
  emits('filter-change', newFilter)
})
</script>

<style scoped>
.filters {
  margin-bottom: 20px;
}

.filters button {
  margin: 0 5px;
  background: #f3d6ff;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s;
}

.filters button:hover {
  transform: translateY(-2px);
}

.filters button.active {
  background: #ff6ec7;
  color: white;
}
</style>